Nhảy tới nội dung

Thiết lập HTML5 Canvas

HTML5 Canvas là gì?​

  • Khi bạn muốn tự vẽ hình ảnh, hoạt ảnh hoặc game bằng HTML5, bạn sẽ cần tới thẻ <canvas>. Đó là một vùng chứa cho đồ họa và bạn có thể vẽ lên đó bằng JavaScript. Bạn có thể vẽ hình khối, đường nét, văn bản và hình ảnh.
  • Về cơ bản nó hoạt động tương tự như thẻ <img>, nhưng bạn có thể tự vẽ hình ảnh thay vì tải từ nguồn bên ngoài.
  • Canvas sẽ là trung tâm cho mọi thao tác vẽ trong game của bạn. Nó hoạt động như một bảng vẽ. Bằng cách lặp lại quá trình vẽ và xóa bảng thật nhanh, nếu vị trí các đối tượng thay đổi một chút trước mỗi lần vẽ, bạn sẽ tạo ra cảm giác chuyển động. Đây là nguyên lý cơ bản của hoạt ảnh và trò chơi.

Thiết lập một tệp HTML5 cơ bản​

Trước khi vẽ đồ họa, bạn cần khởi tạo một tệp HTML5 cơ bản. Hãy bắt đầu với đoạn mã bên dưới:

<body>
    <!-- Canvas của bạn sẽ ở đây -->
</body>
<script>
    // Mã JavaScript của bạn sẽ ở đây
</script>

Bạn có thể lưu đoạn mã này vào tệp index.html.

Tạo một thẻ canvas​

Ngay trong thẻ <body>, thêm thẻ <canvas>:

<canvas id="canvas" width="750" height="400" style="border:1px solid lightgrey;">
    Trình duyệt của bạn không hỗ trợ thẻ HTML5 canvas.
</canvas>

Lấy tham chiếu đến canvas​

Bổ sung đoạn mã JavaScript sau vào thẻ script:

<script>
    "use strict";
    let canvas;
    let context;

    window.onload = init;

    function init(){
        // Lấy tham chiếu đến canvas
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');

        draw();
    }
</script>

Trong hàm init(), gọi canvas.getContext('2d') để lấy đối tượng CanvasRenderingContext2D dùng cho vẽ các đối tượng 2D.

Đảm bảo phần tử đã được nạp​

Sử dụng sự kiện window.onload = init để đảm bảo toàn bộ trang đã nạp xong trước khi truy cập vào canvas.

Vẽ hình ảnh đầu tiên​

Hàm draw() đơn giản:

function draw() {
    // Lấy màu ngẫu nhiên (đỏ hoặc xanh)
    let randomColor = Math.random() > 0.5? '#ff8080' : '#0099b0';

    // Vẽ một hình chữ nhật
    context.fillStyle = randomColor;
    context.fillRect(100, 50, 200, 175);
}

fillStyle được thiết lập trên context và hình chữ nhật được vẽ bằng cách gọi fillRect().

Hình chữ nhật